import { profile, profileCenter, UpImg, updatePwd } from '@/services'
import { Iusers } from '@/utils/teacherPersonCenter'
import { useEffect, useState } from 'react'
import style from './teacherPersonCenter.less'
import { Tabs, Form, Input, Radio, Button, Modal, message } from 'antd';
import { IRouteComponentProps } from 'umi'
import { removeCookie } from '@/utils/auth'
import { UserOutlined, TabletOutlined, MailOutlined } from '@ant-design/icons';


const teacherPersonCenter: React.FC<IRouteComponentProps> = ({ history }) => {
    const [users, setusers] = useState<Iusers>({} as Iusers)
    useEffect(() => {
        count()
    }, [])
    const count = () => {
        profileCenter().then(res => {
            if (res.code === 200) {
                console.log(res.code)
                setusers({ ...res.data })
            }
        })
    }
    const [ oldPassword, setoldPassword ]=useState("")
    const [ newPassword, setnewPassword ]=useState("")
    const [ twonewPassword, settwonewPassword ]=useState("")
    const { TabPane } = Tabs;
    const callback = (key: any) => {
        console.log(key);
    }
    const onvalue = (name: string, str: string) => {
        setusers({ ...users, [name]: str })
    }
    const deletbtn = () => {
        profile(users).then(res => {
            if (res.code === 200) {
                message.success('修改成功');
                setusers({ ...res.data })
                count()
            }
        })
    }
    const delbtn = () => {
        updatePwd({oldPassword,newPassword}).then(res=>{
           console.log(res)
           if(res.code===200){
               message.success(res.msg);
               history.replace('/login')
               removeCookie()
           }
        })
    }
    const [isModalvisible,setisModalvisible] = useState(false)
    const showModal=()=>{
        setisModalvisible(true)
    }
    return <div className={style.div}>
        <div className={style.left}>
            <div>个人信息</div>
            <div>
                <img src={'http://111.203.59.61:8060' + users.avatar}  onClick={showModal} alt="" />
                <Modal title="修改头像" visible= {isModalvisible} footer={null} onCancel={()=>setisModalvisible(false)}>
                    <input type= "file" onChange={(e)=>{
                            let form = new FormData( );
                            console.log('打印初始值',form);
                            let files = e.target.files;
                            console.log('打印具体值',files);
                              if(files){
                                      form . append('file',files[0]);
                                      UpImg(form).then(res=>{
                                          count()
                                          setisModalvisible(false)
                                      })
                                      
                                      
                          }
                    }}/>
                    </Modal>

            </div>
            <div>
                <span><UserOutlined />用户名称</span>
                <span>{users.userName}</span>
            </div>
            <div>
                <span><TabletOutlined />手机号码</span>
                <span>{users.phonenumber}</span>
            </div>
            <div>
                <span><MailOutlined />用户邮箱</span>
                <span>{users.email}</span>
            </div>
        </div>
        <div className={style.right}>
            <div>基本资料</div>
            <div>
                <Tabs defaultActiveKey="1" onChange={callback} size="large">
                    <TabPane tab="基本资料" key="1">
                        <div>
                            <Form>
                                <Form.Item
                                    label="用户昵称"
                                >
                                    <Input value={users.nickName} onChange={(e) => { onvalue("nickName", e.target.value) }} />
                                </Form.Item>
                            </Form>
                        </div>
                        <div>
                            <Form>
                                <Form.Item
                                    label="手机号码"
                                >
                                    <Input value={users.phonenumber} onChange={(e) => { onvalue("phonenumber", e.target.value) }} pattern="[0-9]" maxLength={11} />
                                </Form.Item>
                            </Form>
                        </div>
                        <div>
                            <Form>
                                <Form.Item
                                    label="邮箱"
                                >
                                    <Input value={users.email} onChange={(e) => { onvalue("email", e.target.value) }} />
                                </Form.Item>
                            </Form>
                        </div>
                        <div>
                            <span className={style.span}>性别</span>
                            <Radio.Group value={Number(users.sex) === 0 ? 1 : Number(users.sex)} onChange={(e) => { onvalue("sex", e.target.value) }} >
                                <Radio value={1}>男</Radio>
                                <Radio value={2}>女</Radio>
                            </Radio.Group>
                        </div>
                        <div>
                            <Button type="primary" className={style.btn} onClick={() => deletbtn()}>保存</Button>
                            <Button type="primary" danger onClick={() => {
                                history.replace('/login')
                                removeCookie()
                            }} className={style.btn2}>关闭</Button>
                        </div>
                    </TabPane>
                    <TabPane tab="修改密码" key="2">
                        <div>
                            <Form>
                                <Form.Item
                                    label="旧密码"
                                >
                                    <Input.Password placeholder="输入旧密码" value={oldPassword} onChange={(e)=>setoldPassword(e.target.value)} />
                                </Form.Item>
                            </Form>
                        </div>
                        <div>
                            <Form>
                                <Form.Item
                                    label="新密码"
                                >
                                    <Input.Password placeholder="输入新密码"  value={newPassword} onChange={(e)=>setnewPassword(e.target.value)} />
                                </Form.Item>
                            </Form>
                        </div>
                        <div>
                            <Form>
                                <Form.Item
                                    label="确认密码"
                                >
                                    <Input.Password placeholder="确认密码"  value={twonewPassword} onChange={(e)=>settwonewPassword(e.target.value)}/>
                                </Form.Item>
                            </Form>
                        </div>
                        <div>
                            <Button type="primary" className={style.btn} onClick={delbtn}>保存</Button>
                            <Button type="primary" danger onClick={() => {
                                history.replace('/login')
                                removeCookie()
                            }} className={style.btn2}>关闭</Button>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    </div>
}


export default teacherPersonCenter